<div class="login">
  <div class="login-header">
    <img (click)="goHome()" [src]="logo" alt="">
    <p class="PingFangSC-Regular-16-85">自来水网上营业厅, 欢迎您!</p>
  </div>
  <div class="login-content">
    <div class="login card">
      <img (click)="switchLoginType(0)" class="login-type" *ngIf="loginType >= 2" src="../../../assets/images/login/uerstype.png" alt="">
      <div class="login-form">
        <div class="login-title" *ngIf="loginType <= 1">
          <p (click)="switchLoginType(1)"
            [class]="{ 'current-login-type': loginType === 1 }"
          >验证码登录</p>
          <p (click)="switchLoginType(0)" 
            [class]="{ 'current-login-type': loginType === 0 }"
          >密码登录</p>
        </div>
        <div class="login-title" *ngIf="loginType >= 2">
          <p 
            [class]="{ 'current-login-type': loginType >= 2 }"
          >{{ loginType === 2 ? '微信扫码登录' : '支付宝扫码登录' }}</p>
        </div>

        <!-- 以下为不同的登录方式详情 -->
        <!-- 密码登录 -->
        <form class="form-input login-by-pwd" *ngIf="loginType === 0"
          [formGroup]="pwdForm"
        >
          <div class="form-input-item">
            <nz-input-group [nzPrefix]="prefixTemplateUser">
              <input style="height: 32px" type="text" nz-input placeholder="请输入用户名" 
                formControlName="username"
              />
            </nz-input-group>
            <ng-template #prefixTemplateUser>
              <img src="assets/images/login/uers.svg" alt="" srcset="">
            </ng-template>
            <ng-container *ngIf="username?.touched && username?.errors">
              <app-err-msg>
                {{ username?.errors?.['required'] ? '用户名不能为空' : '' }}
              </app-err-msg>
              <app-err-msg>
                {{ username?.errors?.['pattern'] ? '手机号格式不正确' : '' }}
              </app-err-msg>
            </ng-container>
          </div>
          
          <div class="form-input-item" style="margin-top: 12px">
            <nz-input-group [nzPrefix]="prefixTemplatePwd">
              <input style="height: 32px" type="password" formControlName="password" nz-input placeholder="请输入密码" />
            </nz-input-group>
            <ng-template #prefixTemplatePwd>
              <img src="assets/images/login/pwd.svg" alt="" srcset="">
            </ng-template>
            <app-err-msg *ngIf="password?.touched && password?.errors">
              {{ '密码不能为空' }}
            </app-err-msg>
          </div>

          <div class="form-input-item" style="margin-top: 12px">
            <nz-input-group nzSearch [nzSuffix]="suffixFrontVCode">
              <input style="height: 32px"  formControlName="frontVCode" type="text" nz-input placeholder="请输入验证码" />
            </nz-input-group>
            <ng-template #suffixFrontVCode>
              <app-front-v-code [(vCode)]="frontVCodeValue"></app-front-v-code>
            </ng-template>
            <app-err-msg *ngIf="frontVCode?.touched && frontVCode?.errors">
              {{ '验证码不能为空' }}
            </app-err-msg>
          </div>

          <div class="other-selection">
            <label nz-checkbox [(ngModel)]="rememberUser" [ngModelOptions]="{standalone: true}">记住用户名</label>
            <a (click)="forgetPassword()">忘记密码</a>
          </div>

          <div class="submit-btn" style="margin-top: 22px;">
            <button nz-button nzType="primary" 
              (click)="loginByPwd()"
              [nzLoading]="submitLoading"  
            >登录</button>
          </div>

          <div class="privacy">
            <p>登录注册表示同意&nbsp;&nbsp;
              <span (click)="getUserAgreement()">用户协议</span>&nbsp;&nbsp;
              <span (click)="getPrivacyPolicies()">隐私条款</span>
            </p>
          </div>
        </form>

        <form class="form-input login-by-code" *ngIf="loginType === 1"
          [formGroup]="vCodeForm"
        >
          <div class="form-input-item">
            <nz-input-group [nzPrefix]="prefixTemplateUser">
              <input style="height: 40px"  formControlName="phone" type="text" nz-input placeholder="请输入手机号" />
            </nz-input-group>
            <ng-template #prefixTemplateUser>
              <img src="assets/images/login/uers.svg" alt="" srcset="">
            </ng-template>

            <ng-container *ngIf="phone?.touched && phone?.errors">
              <app-err-msg>
                {{ phone?.errors?.['required'] ? '手机号不能为空' : '' }}
              </app-err-msg>
              <app-err-msg>
                {{ phone?.errors?.['pattern'] ? '手机号格式不正确' : '' }}
              </app-err-msg>
            </ng-container>
          </div>
          
          <div class="form-input-item" style="margin-top: 22px">
            <nz-input-group nzSearch [nzAddOnAfter]="suffixButton">
              <input style="height: 49px" formControlName="vCode" type="text" nz-input placeholder="请输入验证码" />
            </nz-input-group>
            <ng-template #suffixButton>
              <!-- <button style="height: 49px;" nz-button nzType="primary" nzSearch
                [nzLoading]="vCodeBtnLoading"
                [disabled]="vCodeBtnDisabled"
                (click)="getVerifyCode()"
              >
                {{ vCodeText }}
              </button> -->
              <app-v-code height="49" [phone]="phone"></app-v-code>
            </ng-template>
            <app-err-msg *ngIf="vCode?.touched && vCode?.errors">
              {{ '验证码不能为空' }}
            </app-err-msg>
          </div>

          <div class="submit-btn">
            <button [nzLoading]="submitLoading" nz-button nzType="primary" (click)="loginByVCode()">登录</button>
          </div>

          <div class="privacy">
            <p>登录注册表示同意&nbsp;&nbsp;
              <span (click)="getUserAgreement()">用户协议</span>&nbsp;&nbsp;
              <span (click)="getPrivacyPolicies()">隐私条款</span>
            </p>
          </div>
        </form>

        <nz-spin [nzSpinning]="wxCodeSpin" nzTip="加载中..." nzDelay="500">
          <div class="form-input login-by-wechat" *ngIf="loginType >= 2">
            <img *ngIf="weChatLoginCode" [src]="weChatLoginCode" alt="" srcset="">
            <div class="mask" *ngIf="wxCodeErr">
              <img (click)="getWeChatCode()" src="assets/images/icons/refresh.svg" alt="">
            </div>
          </div>
        </nz-spin>
        
      </div>

      <div class="other-login">
        <!-- <button nz-button nzType="link" (click)="goAuthentication()">省统一身份认证登录</button> -->
        <!-- <p>其他登录方式</p> -->
        <!-- <img (click)="switchLoginType(2)" src="assets/images/login/weixin.svg" alt=""> -->
        <!-- <img (click)="switchLoginType(3)" src="assets/images/login/zhifubao.svg" alt=""> -->
      </div>
    </div>
  </div>
</div>
<app-the-bottom [bgColor]="'#fff'"></app-the-bottom>

<app-reset-pwd [(nzVisible)]="resetPwdVisible"></app-reset-pwd>

<nz-modal
  [(nzVisible)]="userAgreementModal"
  [nzCancelText]="null"
  [nzContent]="userAgreement"
  [nzClosable]="false"
  (nzOnOk)="userAgreementOk()"
  [nzWidth]="800"
  [nzStyle]="{ top: '16px' }"
  [nzTitle]="agreementTitle"
>

</nz-modal>
<ng-template #userAgreement>
  <div style="height: 400px;width: 100%;overflow-y: scroll;" [innerHTML]="userAgreementContent"></div>
</ng-template>
